<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>设置self行为属性</title>
		<script src="vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div class="div01" v-on:click="toPer">
				最外层1
				<div class="div02" v-on:click="toThis">内部层1</div>
			</div>
			<br /><br /><br /><br /><br /><br /><br /><br />
			<div v-on:click="toPer">
				最外层2
				<div class="div02" v-on:click="toThis">内部层2</div>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			methods: {
				toPer() {
					console.log("最外层")
				},
				toThis() {
					console.log("当前点击的位置")
				}
			},
		})
	</script>
	<style>
		.div01 {
			background-color: gray;
			width: 200px;
			height: 100px;
		}
		
		.div02 {
			background-color: royalblue;
			width: 380px;
			height: 200px;
		}
	</style>

</html>